<!--
 * @Description: 
 * @Author: wanghongjian
 * @@github: https://github.com/whj0117
 * @Date: 2025-11-06 17:16:47
 * @LastEditors: wanghongjian
 * @LastEditTime: 2025-11-13 13:33:07
-->
<template>
  <div class="dashboard-container">
    <div class="table-data">
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%"
        :header-cell-style="{
          'text-align': 'center',
          'background-color': '#E3E5E8',
        }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="date" label="用户信息">
          <template slot-scope="{ row }">
            <div class="info-content">
              <div class="info-item">
                <div class="item-left">
                  <img src="../../images/login.png" alt="" />
                  <div class="l-info">
                    <div class="username">昵称</div>
                    <div>聂小倩</div>
                  </div>
                </div>
                <div class="item-right">
                  <div>男</div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="预约时间"></el-table-column>
        <el-table-column prop="address" label="预约地点"></el-table-column>
        <el-table-column prop="address" label="跟随管家"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              style="
                color: #fff;
                background-color: #ff47ab;
                border-color: #ff47ab;
              "
            >
              确定
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "Datalist",
  data() {
    return {
      tableData: [
        {
          data: "昵称",
          name: "昵称123",
          address: "上海市",
        },
        {
          data: "性别",
          name: "王小虎",
          address: "上海市",
        },
      ],
    };
  },
  computed: {},
  mounted() {},
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex !== 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    getInfo() {},
  },
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.dashboard-container {
  min-height: calc(100vh - 84px);
  .table-data {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .info-content {
      .info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        padding: 0 10px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid transparent;
        cursor: pointer;
        &.active {
          border-color: #ff47ab;
        }
        &:last-child {
          margin-bottom: 0;
        }
        .item-left {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 16px;
          color: #222222;
          img {
            width: 60px;
            height: 60px;
            border-radius: 6px 6px 6px 6px;
          }
          .l-info {
            margin-left: 8px;
            text-align: left;
            .username {
              margin-bottom: 15px;
              font-size: 14px;
              color: #777777;
            }
          }
        }
        .item-right {
          text-align: right;
          font-size: 14px;
          color: #222222;
        }
      }
    }
  }
}
</style>